<template>
  <div>
    <div class="margin-container-list pad-t-15">
      <div class="div-style-2 font-16 mar-t-0">
        <p class="font-18"><b>商品汇总说明</b></p>
        <p>1、根据设置的截单时间汇总待配送订单下的所有同类商品。假设截单时间设置为21:00，待配送订单A有梨5斤、订单B有梨2斤/苹果1斤，则本期商品汇总信息为梨7斤、苹果1斤。</p>
        <p>2、默认截单时间为昨天21:00后至今天21:00前范围内的商品数据。</p>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate pad-t-15">
        <div>
          <div>
            <el-select class="select-class" v-model="order.timeCol">
              <el-option label="待配送" value="payTime"></el-option>
              <el-option label="待提货" value="deliveryTime"></el-option>
              <el-option label="已提货" value="receivedTime"></el-option>
            </el-select>
            <el-date-picker
              v-model="order.timeValue"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-input style=  "width: 200px;" v-model="order.textValue" placeholder="商品名称"></el-input>
            <el-select class="select-class" v-model="order.supplierId" placeholder="商品来源">
              <el-option label="自营" value="0"></el-option>
              <el-option v-for="supplier in suppliers" :key="supplier.supplierId" :label="supplier.supplierName" :value="supplier.supplierId"></el-option>
            </el-select>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </div>
          <div class="pad-t-10">
            <el-button @click="exportOrder">导出Excel</el-button>
            <el-button type="primary" @click="dialogFormVisible = true">设置默认截单时间</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="orderGoodsList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
          <el-table-column min-width="240px" label="商品汇总信息">
            <template slot-scope="scope">
              <div class="flex v-align-c">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="mini-pic"></label>
                <div v-if="scope.row.goodsTitle" class="font-12 pad-l-10">
                  <div>{{scope.row.goodsTitle}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="规格" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.skuDetail" style="font-size: 10px;color: #3187fd;">{{scope.row.skuDetail}}</div>
              <div v-else style="font-size: 10px;color: #3187fd;">无</div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="需求数(件)" prop="goodsNum" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.goodsNum" class="font-red pad-l-10">
                <div>{{scope.row.goodsNum}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="商品来源" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.supplierName" style="font-size: 10px;color: #3187fd;">{{scope.row.supplierName}}</div>
              <div v-else style="font-size: 10px;color: #3187fd;">自营</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog width="500px" v-el-drag-dialog title="默认截单时间设置" :visible.sync="dialogFormVisible">
        <el-form :model="order">
          <el-form-item class="mar-l-20">
            <div class="font-blue">根据设置的默认时间汇总统计昨天到今天同时间段内的同类商品</div>
            <el-time-picker
              v-model="order.statTime"
              :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
              placeholder="任意时间点">
            </el-time-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEnterpriseConfig">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .select-class {
    margin-right: -5px;
    width: 110px;
  }
  .mini-pic {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>

<script>
  import { pagingProjectOrderGoods } from '@/api/goods/order'
  import { getByEnterpriseId, saveEnterpriseConfig } from '@/api/user/enterprise'
  import { listSupplier } from '@/api/user/supplier'
  import { downloadFile } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        dialogFormVisible: false,
        total: 0,
        listLoading: true,
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10
        },
        order: {
          statTime: this.getDefaultStatTime(),
          timeCol: 'payTime',
          timeValue: [],
          textCol: 'goodsTitle',
          textValue: ''
        },
        enterpriseConfig: {},
        dict: {
        },
        orderGoodsList: [],
        suppliers: []
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      this.initSuppliers()
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.enterpriseConfig = response.data
        if (this.enterpriseConfig && this.enterpriseConfig.orderStatTime) {
          const times = this.enterpriseConfig.orderStatTime.split(':')
          this.order.statTime.setHours(times[0])
          this.order.statTime.setMinutes(times[1])
          this.order.statTime.setSeconds(times[2])
        }
        this.order.timeValue = [
          this.order.statTime.getFullYear() + '-' + (this.order.statTime.getMonth() + 1) + '-' + (this.order.statTime.getDate() - 1) + ' ' + this.order.statTime.getHours() + ':' + this.order.statTime.getMinutes() + ':' + this.order.statTime.getSeconds(),
          this.order.statTime.getFullYear() + '-' + (this.order.statTime.getMonth() + 1) + '-' + (this.order.statTime.getDate()) + ' ' + this.order.statTime.getHours() + ':' + this.order.statTime.getMinutes() + ':' + this.order.statTime.getSeconds()
        ]
        this.init()
      })
    },
    filters: {
      dateFilter(e) {
        return e
      }
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.page = currentPage
        this.searchListQuery.size = size
        this.searchListQuery.dateColumn = this.order.timeCol
        this.searchListQuery.startDate = (this.order.timeValue && this.order.timeValue.length > 0) ? this.order.timeValue[0] : ''
        this.searchListQuery.endDate = (this.order.timeValue && this.order.timeValue.length > 1) ? this.order.timeValue[1] : ''
        this.searchListQuery[this.order.textCol] = this.order.textValue
        this.searchListQuery.supplierId = this.order.supplierId
      },
      init() {
        this.setSearchListQuery()
        pagingProjectOrderGoods(this.searchListQuery).then(response => {
          if (response.isError) {
            return
          }
          this.total = response.data.total
          this.orderGoodsList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      initSuppliers() {
        listSupplier({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.suppliers = response.data
        })
      },
      saveEnterpriseConfig() {
        const statTime = this.order.statTime.getHours() + ':' + this.order.statTime.getMinutes() + ':' + this.order.statTime.getSeconds()
        if (!this.enterpriseConfig) {
          this.enterpriseConfig = {}
        }
        this.enterpriseConfig.orderStatTime = statTime
        this.enterpriseConfig.enterpriseId = this.getEnterpriseId()
        saveEnterpriseConfig(this.enterpriseConfig).then(response => {
          if (response.isError) return
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          setTimeout(() => {
            location.reload()
          }, 1000)
        })
      },
      exportOrder() {
        downloadFile('/goods/projectOrder/exportProjectOrderGoods', this.searchListQuery, '商品汇总.xlsx')
      },
      handleSearch() {
        this.init()
      },
      getDefaultStatTime() {
        const statTime = new Date()
        statTime.setHours(21)
        statTime.setMinutes(0)
        statTime.setSeconds(0)
        return statTime
      },
      resetSearch() {
        this.searchListQuery = { ... this.defaultQuery }
        this.order = {
          statTime: this.getDefaultStatTime,
          timeCol: 'payTime',
          timeValue: [],
          textCol: 'goodsTitle',
          textValue: ''
        }
        this.init()
      }
    }
  }

</script>
